<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>评论管理</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" />
            <el-table-column prop="article_title" label="文章标题" />
            <el-table-column prop="user_nickname" label="用户" />
            <el-table-column prop="content" label="留言内容" />
            <el-table-column prop="reply" label="回复内容" />
            <el-table-column label="操作" width='180'>
                <template #default="scope">
                    <el-button @click="handleOpenDialog(scope.row,scope.$index)" class="edit" size="small">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        回复
                    </el-button>
                    <el-button size="small" type="danger">
                   隐藏
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 回复 -->
    <el-dialog v-model="dialogVisible" title="回复评论">
        <el-form :model="form" :rules="rules" ref="formRef">      
                <el-descriptions direction="vertical" :column="2" border>
                    <el-descriptions-item label="评论用户">{{form.user_nickname}}</el-descriptions-item>
                    <el-descriptions-item label="评论文章">{{form.article_title}}</el-descriptions-item>
                    <el-descriptions-item label="评论内容" :span="2">{{form.content}}</el-descriptions-item>
                </el-descriptions>
            <el-form-item prop="reply">
                <el-input  v-model="form.reply" type="textarea" placeholder="输入回复内容" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleReply(formRef)">回复</el-button>
            </span>
        </template>
    </el-dialog>

</template>
<script setup>
import { toRefs, reactive, ref, computed, onMounted, onUpdated } from 'vue';
import Article from '@/api/article';
// import { id } from 'element-plus/es/locale';
// import { ElMessageBox } from 'element-plus';
const tableData = ref([]);
const dialogVisible = ref(false);
// 获取form组件实例对象
let formRef = ref();
// 缓存当前行的索引
let current = ref(0);
let form = ref({ user_nickname: '', article_title: '', content: '', reply: '' });
//打开回复弹窗
let handleOpenDialog = (data, i) => {
    dialogVisible.value = true;
    //记录当前索引
    current.value = i;
    //还原表单
    form.value = { ...data };
}

// 表单验证规则
const rules = reactive({
    reply: [
        { required: true, message: '请输入回复内容', trigger: 'blur' },
        { min: 1, max: 100, message: '长度要求1-100个字符之间', trigger: 'blur' },
    ],

});
//编辑标签
function handleReply(formEl) {
    //表单验证
    formEl.validate(async (valid, fields) => {
        //通过验证
        if (valid) {
            //发送ajax
            let { status, msg} = await Article.reply(  {...form.value });
            if (status) {
                //修改成功
       	// 操作DOM
				tableData.value[current.value] = { ...form.value };
                //关闭弹窗，消息提示
                dialogVisible.value = false;
                ElMessage.success(msg);
            } else {
                //错误提示
                ElMessage.error(msg);
            }

        } else {
            console.log('失败字段', fields);
        }
    });
}

//获取评论列表
async function loadList() {
    let { status, msg, total, data } = await Article.say();
    if (status) {
        tableData.value = data;
    }
}
loadList();

</script>
<style lang="less" scoped>
.edit {
    background-color: rgb(143, 190, 231);
}
</style>